<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>计费模型列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/admin/src/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .layui-input-inline{margin-top: 5px;}
    .layui-form-label{margin-top: 5px;}
    .layui-btn{margin-top: 5px;}
    .layui-table-cell{
        height: 60px;
    }
  </style>
</head>
<body>
<div class="layui-form  layuiadmin-card-header-auto">
  <div class="layui-form-item" style="margin-bottom: 0px;">
    <div class="layui-inline">
      <label class="layui-form-label">模型标题</label>
      <div class="layui-input-inline">
        <input type="text" name="title" id="title" placeholder="请输入计费模型标题" autocomplete="off" class="layui-input">
      </div>
      <label class="layui-form-label">是否启用</label>
      <div class="layui-input-inline">
        <select name="is_status" id="is_status"  lay-search >
          <option value="" >选择是否启用</option>
          <option value="1" >是</option>
          <option value="2" >否</option>
        </select>
      </div>
      <button class="layui-btn"  id="searchCompany" data-type="reload">
        <i class="layui-icon layui-icon-search layuiadmin-button-btn">搜索</i>
      </button>
    </div>
  </div>
</div>
<div class="layui-card-body" style="padding: 15px;">
<table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>        
<script src="/admin/src/layui.js" ></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 
<script>
layui.use(['form','table','dropdown'], function(){
  var table = layui.table;
  var $ = layui.$;
  var form = layui.form ;
  var dropdown = layui.dropdown ;
  table.render({
    elem: '#test'
    ,url:'/admin/billingModel/list'/*,tpa=http://www.ilayuis.com/test/table/demo1.json*/
	,method:'post'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	,defaultToolbar: []
    ,title: '文章列表'
    ,cols: [[
		{field:'id', width:90, title: 'ID', sort: true}
		,{field:'title', width:200, title: '计费模型标题'}
		,{field:'billing_mode',  title: '计费模型编号'}
		,{field:'status_name',  title: '是否启用'}
		,{field:'remark',  title: '备注'}
		,{field:'create_time', title:'创建时间', width:160}
		,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
    ]]
    ,page: true
  });
  var active = {
      reload: function () {
          var title = $("#title").val();//搜索框内容
          var is_status = $("#is_status").val();//搜索框内容
          //执行重载
          table.reload('test', {
              page: {
                  curr: 1 //重新从第 1 页开始
              }
              , where: {
                  title: title,//作为参数传递给后端php
                  is_status: is_status,//作为参数传递给后端php
              }
          });
      },
  };
  $('#searchCompany').on('click', function () {
      var type = $(this).data('type');//自定义type属性，这里即为reload
      active[type] ? active[type].call(this) : ''; //如果存在active[type]，则调用改函数
  });

  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    switch(obj.event){
      case 'addData':
		layer.open({
			type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
			, title: '添加计费模型' //不显示标题栏
			, area : [ '70%', '90%' ]
			, closeBtn: 1
			, shade: 0.8//遮幕
			, id: 'LAY_layuipro' //设定一个id，防止重复弹出
			// ,btn: [ '表格','取消']
			, btnAlign: 'c'//按钮排列：居中对齐
			, moveType: 1 //拖拽模式，0或者1
			, resize: true
			, content: '/admin/billingModel/add/form'//跳转到想要的界面，这里是我自己项目的跳转界面
			,success: function (layero) {
				var btn = layero.find('.layui-layer-btn');
				btn.find('.layui-layer-btn0').attr({
					href: '${path}'
					, target: '_blank'
				});
			}
		})		
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
      var that = this;
      var data = obj.data;
    if(obj.event === 'del'){
		layer.confirm('确定要删除？', function(index){
			var postData = {'id':data.id};
			$.ajax({
				url : '/admin/billingModel/delete/data',
				type : 'post',
				dataType : 'json',
				data : postData,
				success : function (backData) {
					//删除成功
				  if(backData['status'] == 200){
					  obj.del();
					  layer.close(index);
					  layer.msg(backData.message,{time:1200});
				  }else{
					  layer.msg(backData.message);
				  }
				}
			})
		});
    } else if(obj.event === 'edit'){
		layer.open({
			type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
			, title: '编辑计费模型' //不显示标题栏
			, area : [ '80%', '90%' ]
			, closeBtn: 1
			, shade: 0.8//遮幕
			, id: 'LAY_layuipro' //设定一个id，防止重复弹出
			// ,btn: [ '表格','取消']
			, btnAlign: 'c'//按钮排列：居中对齐
			, moveType: 1 //拖拽模式，0或者1
			, resize: true
			, content: '/admin/billingModel/edit/form?id='+data.id//跳转到想要的界面，这里是我自己项目的跳转界面
			,success: function (layero) {
				var btn = layero.find('.layui-layer-btn');
				btn.find('.layui-layer-btn0').attr({
					href: '${path}'
					, target: '_blank'
				});
			}
		})		
    }else if(obj.event === 'more'){
        //更多下拉菜单
        dropdown.render({
            elem: that
            ,show: true //外部事件触发即显示
            ,data: [{
                title: '详情'
                ,id: 'billing_mode'
            }]
            ,click: function(moreInfo, othis){
                // console.log(moreInfo);
                // console.log(data);
                if(moreInfo.id == 'billing_mode'){
                    layer.open({
                        type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                        , title: '计费模型' //不显示标题栏
                        , area : [ '80%', '90%' ]
                        , closeBtn: 1
                        , shade: 0.8//遮幕
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        // ,btn: [ '表格','取消']
                        , btnAlign: 'c'//按钮排列：居中对齐
                        , moveType: 1 //拖拽模式，0或者1
                        , resize: true
                        , content: '/admin/billingModel/info/data?id='+data.id//跳转到想要的界面，这里是我自己项目的跳转界面
                        ,success: function (layero) {
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: '${path}'
                                , target: '_blank'
                            });
                        }
                    })
                }

            }
            ,align: 'right' //右对齐弹出（v2.6.8 新增）
            ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
        });
    }
  });

});
</script>

</body>
</html>